<template>
    <div class="wrap_search">
        <mt-search v-model="words" @keyup.enter.native="search" ></mt-search>
        <div class="list" v-if="!pos">
            <div v-for="post in list">
                <post-item :item="post"></post-item>
            </div>
            <div @click="getMore">加载更多>></div>
        </div>
    </div>

</template>

<script>
    // 1 引入状态文件;
    import store from '../../store';
    import {mapState,mapMutations} from 'vuex';


    export default {
        name: "search",
        props:["mark"],
        data(){
            return {list:[],"page":1,"totalpage":0,pos:0,words:""}
        },
        created(){
            this.pos = this.mark==1?1:0;
            if(this.pos==0){
                this.search();
            }
        },
        methods:{
            ...mapMutations(['setwords']),
            search(){

                if(this.pos==1){
                    this.$router.push("/search");
                    store.commit('setwords',this.words);
                }else{
                    this.words = this.words.length>=1?this.words:store.state.words;
                    this.getData();
                }

            },
            getMore(){

                if(this.page<this.totalpage){
                    this.page++;
                    console.log("curpage"+this.page);
                    this.getData();
                }else{
                    console.log("this is last page!!!");
                }

            },
            getData(){
                axios.get("/post/m_search/"+this.words+"?page="+this.page).then(res=>{

                    this.totalpage =res.data.last_page;
                    this.list = res.data.data;
                   // console.log(this.list);

                })
            }
        }
    }
</script>

<style>
    .wrap_search{
        padding-top: 1rem;
    }
    .mint-search{
        width:100%;
        position:fixed;
        left:0;
        top:0;
        z-index:1000;
    }
    .mint-search-list{
        position: static;
    }
    .mint-search{
        height:auto;
    }

    .list{
        padding:0 0.3rem;
        padding-bottom:1.8rem;
    }

</style>